<template>
    <ul class="list">
        <li class="item" @click="handleLetterClick">A</li>
        <li class="item" @click="handleLetterClick">B</li>
        <li class="item" @click="handleLetterClick">C</li>
        <li class="item" @click="handleLetterClick">D</li>
        <li class="item" @click="handleLetterClick">E</li>
        <li class="item" @click="handleLetterClick">F</li>
        <li class="item" @click="handleLetterClick">G</li>
        <li class="item" @click="handleLetterClick">H</li>
        <li class="item" @click="handleLetterClick">I</li>
        <li class="item" @click="handleLetterClick">J</li>
        <li class="item" @click="handleLetterClick">K</li>
        <li class="item" @click="handleLetterClick">L</li>
        <li class="item" @click="handleLetterClick">M</li>
        <li class="item" @click="handleLetterClick">N</li>
        <li class="item" @click="handleLetterClick">O</li>
        <li class="item" @click="handleLetterClick">P</li>
        <li class="item" @click="handleLetterClick">Q</li>

    </ul>
</template>

<script>
export default {
    name: 'CityAlphabet',
    methods: {
      handleLetterClick (e) {
        console.log(e.target.innerText)
      }
    }
}

</script>

<style lang="stylus" scoped>
   @import '~@/assets/styles/varibles.styl' 
    .list
      display: flex
      flex-direction: column
      justify-content: center
      position: absolute
      top: 1.58rem
      right: 0
      bottom: 0
      width: .4rem
      .item
        line-height: .4rem
        text-align: center
        color: $bgColor
    
    
</style>